<template>
  <view class="container">
    <!-- 顶部状态栏 -->
    <view class="status-bar"></view>
    
    <!-- 页面内容 -->
    <view class="page-content">
      <!-- 标题区域 -->
      <view class="header">
        <view class="header-main">
          <text class="title">能耗排名</text>
          <text class="subtitle">本写字楼企业能耗对比</text>
        </view>
        <view class="header-actions">
          <view class="action-item" @tap="refreshRanking">
            <text class="action-icon">🔄</text>
          </view>
          <view class="action-item" @tap="showInfo">
            <text class="action-icon">ℹ️</text>
          </view>
        </view>
      </view>
      
      <!-- 挑战榜入口 -->
      <view class="challenge-banner">
        <view class="banner-content" @tap="toggleChallengeDetail">
          <view class="banner-main">
            <view class="banner-icon">🏆</view>
            <view class="banner-text">
              <text class="banner-title">节能挑战进行中</text>
              <text class="banner-desc">参与挑战赢取奖励，查看排名 →</text>
            </view>
          </view>
          <view class="banner-badge">
            <text class="badge-text">NEW</text>
          </view>
          <view class="banner-arrow" :class="{ 'arrow-up': showChallengeDetail }">
            <text>▼</text>
          </view>
        </view>

        <!-- 挑战榜详情 -->
        <view class="challenge-detail" v-if="showChallengeDetail">
          <!-- 当前挑战进度 -->
          <view class="challenge-section">
            <view class="section-header">
              <text class="section-title">我的挑战进度</text>
              <text class="section-subtitle">本月参与2项挑战</text>
            </view>
            
            <view class="challenge-progress">
              <view class="progress-item">
                <view class="progress-info">
                  <text class="challenge-name">月度节能10%</text>
                  <text class="progress-text">已完成{{ currentChallenge.progress }}%</text>
                </view>
                <view class="progress-bar">
                  <view 
                    class="progress-fill" 
                    :style="{ width: currentChallenge.progress + '%' }"
                  ></view>
                </view>
                <view class="reward-badge">
                  <text class="reward-text">+50积分</text>
                </view>
              </view>
              
              <view class="progress-item">
                <view class="progress-info">
                  <text class="challenge-name">零待机挑战</text>
                  <text class="progress-text">连续{{ standbyChallenge.days }}天</text>
                </view>
                <view class="progress-bar">
                  <view 
                    class="progress-fill" 
                    :style="{ width: (standbyChallenge.days / 7) * 100 + '%' }"
                  ></view>
                </view>
                <view class="reward-badge">
                  <text class="reward-text">+30积分</text>
                </view>
              </view>
            </view>
          </view>

          <!-- 挑战排行榜 -->
          <view class="challenge-section">
            <view class="section-header">
              <text class="section-title">挑战进度榜</text>
              <text class="section-subtitle">前10名可获得额外奖励</text>
            </view>
            
            <view class="challenge-ranking">
              <view 
                v-for="(user, index) in challengeRanking" 
                :key="user.id"
                class="ranking-item"
                :class="{
                  'ranking-top-1': index === 0,
                  'ranking-top-2': index === 1,
                  'ranking-top-3': index === 2,
                  'current-user': user.isCurrent
                }"
              >
                <view class="rank-number">
                  <text v-if="index < 3" class="medal-icon">
                    {{ index === 0 ? '🥇' : index === 1 ? '🥈' : '🥉' }}
                  </text>
                  <text v-else>{{ index + 1 }}</text>
                </view>
                
                <view class="user-info">
                  <text class="user-name">{{ user.name }}</text>
                  <text class="user-challenge">参与{{ user.challengeCount }}项挑战</text>
                </view>
                
                <view class="score-info">
                  <text class="score-value">{{ user.points }}</text>
                  <text class="score-label">积分</text>
                </view>
              </view>
            </view>
          </view>

          <!-- 可参与挑战 -->
          <view class="challenge-section">
            <view class="section-header">
              <text class="section-title">可参与挑战</text>
              <text class="section-subtitle">选择挑战开始节能之旅</text>
            </view>
            
            <view class="available-challenges">
              <view 
                v-for="challenge in availableChallenges" 
                :key="challenge.id"
                class="challenge-card"
                @tap.stop="joinChallenge(challenge)"
              >
                <view class="challenge-icon">{{ challenge.icon }}</view>
                <view class="challenge-content">
                  <text class="challenge-title">{{ challenge.title }}</text>
                  <text class="challenge-desc">{{ challenge.description }}</text>
                  <view class="challenge-reward">
                    <text class="reward-icon">🎁</text>
                    <text class="reward-desc">{{ challenge.reward }}</text>
                  </view>
                </view>
                <view class="challenge-action">
                  <button class="join-btn">参与</button>
                </view>
              </view>
            </view>
          </view>

          <!-- 挑战规则说明 -->
          <view class="rules-section">
            <view class="rules-header" @tap.stop="toggleRules">
              <text class="rules-title">挑战规则说明</text>
              <text class="rules-arrow">{{ showRules ? '▲' : '▼' }}</text>
            </view>
            
            <view class="rules-content" v-if="showRules">
              <text class="rule-item">• 挑战周期为自然月，每月1日重置</text>
              <text class="rule-item">• 完成挑战可获得相应积分奖励</text>
              <text class="rule-item">• 积分可在积分商城兑换礼品</text>
              <text class="rule-item">• 每月排名前10名有额外奖励</text>
              <text class="rule-item">• 数据统计以智能电表为准</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 我的排名概览 -->
      <view class="card my-ranking-card">
        <view class="ranking-overview">
          <view class="rank-badge" :class="getRankClass(myRanking.rank)">
            <text class="rank-number">{{ myRanking.rank }}</text>
            <text class="rank-label">名</text>
          </view>
          
          <view class="ranking-info">
            <text class="company-name">{{ myRanking.aliasName }}</text>
            <text class="ranking-desc">{{ getRankDescription(myRanking.rank) }}</text>
            <view class="ranking-change" :class="getChangeClass(myRanking.change)">
              <text class="change-icon">{{ myRanking.change > 0 ? '↗' : myRanking.change < 0 ? '↘' : '→' }}</text>
              <text class="change-text">
                {{ myRanking.change === 0 ? '持平' : `较上月${myRanking.change > 0 ? '上升' : '下降'}${Math.abs(myRanking.change)}名` }}
              </text>
            </view>
          </view>
          
          <view class="ranking-stats">
            <view class="stat-item">
              <text class="stat-value">{{ myRanking.usage }}</text>
              <text class="stat-unit">kWh</text>
              <text class="stat-label">月用电</text>
            </view>
            <view class="stat-item">
              <text class="stat-value">{{ myRanking.areaEfficiency }}</text>
              <text class="stat-unit">kWh/m²</text>
              <text class="stat-label">单位能耗</text>
            </view>
          </view>
        </view>
        
        <!-- 企业基本信息 -->
        <view class="company-basic-info">
          <view class="info-row">
            <view class="info-item">
              <text class="info-icon">🏢</text>
              <text class="info-label">楼层</text>
              <text class="info-value">{{ myRanking.floor }}</text>
            </view>
            <view class="info-item">
              <text class="info-icon">📐</text>
              <text class="info-label">面积</text>
              <text class="info-value">{{ myRanking.area }}m²</text>
            </view>
            <view class="info-item">
              <text class="info-icon">🏭</text>
              <text class="info-label">行业</text>
              <text class="info-value">{{ myRanking.industry }}</text>
            </view>
          </view>
        </view>
        
        <!-- 别名设置入口 -->
        <view class="alias-setting" @tap="editAlias">
          <text class="alias-icon">✏️</text>
          <text class="alias-text">修改企业信息</text>
        </view>
      </view>
      
      <!-- 排名维度选择 -->
      <view class="card dimension-card">
        <view class="card-header">
          <text class="card-title">排名维度</text>
        </view>
        
        <view class="dimension-tabs">
          <view 
            v-for="dimension in dimensions" 
            :key="dimension.value"
            class="dimension-option"
            :class="{ 'dimension-active': activeDimension === dimension.value }"
            @tap="switchDimension(dimension.value)"
          >
            <text class="dimension-icon">{{ dimension.icon }}</text>
            <text class="dimension-text">{{ dimension.label }}</text>
          </view>
        </view>
      </view>
      
      <!-- 排名列表 -->
      <view class="card ranking-list-card">
        <view class="card-header">
          <view class="card-title-section">
            <text class="card-title">{{ getDimensionTitle(activeDimension) }}</text>
            <text class="card-subtitle">本楼 {{ currentRankingList.length }} 家企业参与排名</text>
          </view>
          <view class="ranking-filter">
            <picker 
              @change="onFloorChange" 
              :value="selectedFloor" 
              :range="floorOptions" 
              range-key="label"
              class="floor-picker"
            >
              <view class="picker-trigger">
                <text class="picker-text">{{ getFloorLabel(selectedFloor) }}</text>
                <text class="picker-arrow">▼</text>
              </view>
            </picker>
          </view>
        </view>
        
        <view class="ranking-list">
          <!-- 前三名特殊样式 -->
          <view 
            v-for="(item, index) in currentRankingList" 
            :key="item.id"
            class="ranking-item"
            :class="{
              'ranking-top-1': index === 0,
              'ranking-top-2': index === 1,
              'ranking-top-3': index === 2,
              'ranking-current': item.id === 'current',
              'ranking-even': index % 2 === 0
            }"
          >
            <!-- 排名序号 -->
            <view class="rank-number-section">
              <view 
                class="rank-medal"
                v-if="index < 3"
                :class="`medal-${index + 1}`"
              >
                <text class="medal-icon">
                  {{ index === 0 ? '🥇' : index === 1 ? '🥈' : '🥉' }}
                </text>
              </view>
              <text v-else class="rank-number">{{ index + 1 }}</text>
            </view>
            
            <!-- 企业信息 -->
            <view class="company-info">
              <text class="company-name" :class="{ 'current-company': item.id === 'current' }">
                {{ item.aliasName }}
                <text class="current-tag" v-if="item.id === 'current' ">(我的企业)</text>
              </text>
              <text class="company-desc">{{ getCompanyDescription(item) }}</text>
            </view>
            
            <!-- 能耗数据 -->
            <view class="energy-data">
              <text class="energy-value">{{ item.usage }}</text>
              <text class="energy-unit">kWh</text>
              <view class="energy-efficiency" v-if="item.areaEfficiency">
                <text class="efficiency-value">{{ item.areaEfficiency }}</text>
                <text class="efficiency-unit">kWh/m²</text>
              </view>
            </view>
            
            <!-- 对比标识 -->
            <view class="comparison-indicator" v-if="item.id === 'current'">
              <view class="indicator-dot"></view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 楼宇对标分析 -->
      <view class="card benchmark-card">
        <view class="card-header">
          <text class="card-title">楼宇对标分析</text>
          <view class="card-icon">
            <text class="iconfont">🏢</text>
          </view>
        </view>
        
        <view class="benchmark-content">
          <view class="benchmark-item">
            <view class="benchmark-header">
              <text class="benchmark-label">与楼宇平均对比</text>
              <view class="benchmark-status" :class="getBenchmarkStatus(myRanking.vsBuildingAvg)">
                <text class="status-text">{{ getBenchmarkText(myRanking.vsBuildingAvg) }}</text>
              </view>
            </view>
            <view class="benchmark-bar">
              <view class="bar-labels">
                <text class="bar-label">我的企业</text>
                <text class="bar-value">{{ myRanking.usage }} kWh</text>
                <text class="bar-label">楼宇平均</text>
                <text class="bar-value">{{ buildingAverage }} kWh</text>
              </view>
              <view class="bar-container">
                <view 
                  class="bar-fill my-bar" 
                  :style="{ width: getBarWidth(myRanking.usage, buildingAverage) + '%' }"
                ></view>
                <view 
                  class="bar-fill avg-bar" 
                  :style="{ width: getBarWidth(buildingAverage, myRanking.usage) + '%' }"
                ></view>
              </view>
            </view>
          </view>
          
          <view class="benchmark-item">
            <view class="benchmark-header">
              <text class="benchmark-label">单位面积能耗对比</text>
              <view class="benchmark-status" :class="getBenchmarkStatus(myRanking.areaVsAvg)">
                <text class="status-text">{{ getBenchmarkText(myRanking.areaVsAvg) }}</text>
              </view>
            </view>
            <view class="gap-analysis">
              <view class="gap-item">
                <text class="gap-label">能耗水平</text>
                <text class="gap-value" :class="getGapClass(myRanking.areaVsAvg)">
                  {{ myRanking.areaVsAvg > 0 ? '+' : '' }}{{ myRanking.areaVsAvg }}%
                </text>
              </view>
              <view class="gap-item">
                <text class="gap-label">节能潜力</text>
                <text class="gap-value potential">{{ myRanking.savingPotential }} kWh/月</text>
              </view>
              <view class="gap-item">
                <text class="gap-label">成本节约</text>
                <text class="gap-value saving">¥{{ myRanking.costSaving }}/月</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 绿色楼宇贡献 -->
      <view class="card contribution-card">
        <view class="card-header">
          <view class="card-title-section">
            <text class="card-title">绿色楼宇贡献</text>
            <text class="card-subtitle">您的节能行为为环保助力</text>
          </view>
          <view class="card-icon">
            <text class="iconfont">🌿</text>
          </view>
        </view>
        
        <view class="contribution-content">
          <!-- 统计数据 -->
          <view class="contribution-stats">
            <view class="stat-item">
              <view class="stat-icon">⚡</view>
              <view class="stat-info">
                <text class="stat-value">{{ totalBuildingSaving }}</text>
                <text class="stat-unit">kWh</text>
                <text class="stat-label">楼宇总节电</text>
              </view>
            </view>
            
            <view class="stat-item">
              <view class="stat-icon">🌍</view>
              <view class="stat-info">
                <text class="stat-value">{{ carbonReduction }}</text>
                <text class="stat-unit">kg</text>
                <text class="stat-label">碳减排</text>
              </view>
            </view>
            
            <view class="stat-item">
              <view class="stat-icon">🌳</view>
              <view class="stat-info">
                <text class="stat-value">{{ equivalentTrees }}</text>
                <text class="stat-unit">棵</text>
                <text class="stat-label">相当于植树</text>
              </view>
            </view>
          </view>
          
          <!-- 进度条展示 -->
          <view class="progress-section">
            <view class="progress-header">
              <text class="progress-title">本月节能目标</text>
              <text class="progress-percent">{{ energySavingProgress }}%</text>
            </view>
            <view class="progress-bar">
              <view 
                class="progress-fill" 
                :style="{ width: energySavingProgress + '%' }"
              ></view>
            </view>
            <view class="progress-labels">
              <text class="progress-label">已节约 {{ currentMonthSaving }} kWh</text>
              <text class="progress-target">目标 {{ monthlyTarget }} kWh</text>
            </view>
          </view>
          
          <!-- 环保等级 -->
          <view class="eco-level">
            <view class="level-header">
              <text class="level-title">环保等级</text>
              <view class="level-badge" :class="getEcoLevelClass(ecoLevel)">
                <text class="level-text">{{ ecoLevel }}</text>
              </view>
            </view>
            <view class="level-progress">
              <view 
                v-for="level in ecoLevels" 
                :key="level.name"
                class="level-step"
                :class="{ 
                  'level-active': level.value <= ecoLevelValue,
                  'level-current': level.value === ecoLevelValue
                }"
              >
                <view class="step-dot"></view>
                <text class="step-label">{{ level.name }}</text>
              </view>
            </view>
          </view>
          
          <!-- 贡献详情 -->
          <view class="contribution-details">
            <view class="detail-item">
              <view class="detail-icon">🏆</view>
              <view class="detail-content">
                <text class="detail-title">您的排名</text>
                <text class="detail-value">楼宇节能第 {{ energySavingRank }} 名</text>
              </view>
            </view>
            
            <view class="detail-item">
              <view class="detail-icon">📈</view>
              <view class="detail-content">
                <text class="detail-title">累计贡献</text>
                <text class="detail-value">已节约 {{ totalPersonalSaving }} kWh</text>
              </view>
            </view>
          </view>
          
          <!-- 环保提示 -->
          <view class="eco-tips">
            <view class="tip-header">
              <text class="tip-icon">💡</text>
              <text class="tip-title">环保小贴士</text>
            </view>
            <view class="tip-content">
              <text class="tip-text">您的节能行为相当于减少{{ carbonReduction }}kg碳排放，为{{ equivalentTrees }}棵树提供了生长环境！</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 节能建议 -->
      <view class="card suggestion-card">
        <view class="card-header">
          <text class="card-title">节能建议</text>
          <view class="card-icon">
            <text class="iconfont">💡</text>
          </view>
        </view>
        
        <view class="suggestion-list">
          <view 
            v-for="(suggestion, index) in energySuggestions" 
            :key="index"
            class="suggestion-item"
          >
            <view class="suggestion-icon">
              <text class="icon">{{ suggestion.icon }}</text>
            </view>
            <view class="suggestion-content">
              <text class="suggestion-title">{{ suggestion.title }}</text>
              <text class="suggestion-desc">{{ suggestion.description }}</text>
              <view class="suggestion-impact">
                <text class="impact-text">预计节约: {{ suggestion.saving }} kWh/月</text>
              </view>
            </view>
            <view class="suggestion-action">
              <button class="action-btn" @tap="viewSuggestionDetail(suggestion)">查看</button>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 分享成就 -->
      <view class="card share-card" v-if="showSharePrompt && myRanking.change > 0">
        <view class="share-content">
          <text class="share-icon">🎉</text>
          <text class="share-title">排名提升!</text>
          <text class="share-desc">您的能效排名较上月上升{{ myRanking.change }}名</text>
          <view class="share-actions">
            <button class="share-btn" @tap="shareRanking">分享成就</button>
            <text class="dismiss-btn" @tap="dismissShare">稍后</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 修改别名弹窗 -->
    <view class="alias-modal" v-if="showAliasModal">
      <view class="modal-mask" @tap="closeAliasModal"></view>
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">设置显示名称</text>
          <text class="modal-close" @tap="closeAliasModal">×</text>
        </view>
        
        <view class="modal-body">
          <text class="modal-desc">设置一个昵称在排名中显示（2-10个字符）</text>
          
          <view class="alias-input-group">
            <input 
              v-model="newAliasName"
              type="text" 
              maxlength="10"
              placeholder="请输入显示名称"
              class="alias-input"
            />
            <text class="char-count">{{ newAliasName.length }}/10</text>
          </view>
          
          <view class="alias-examples">
            <text class="examples-title">示例名称：</text>
            <view class="example-tags">
              <text 
                v-for="example in exampleAliases" 
                :key="example"
                class="example-tag"
                @tap="newAliasName = example"
              >
                {{ example }}
              </text>
            </view>
          </view>
        </view>
        
        <view class="modal-actions">
          <button class="action-btn cancel" @tap="closeAliasModal">取消</button>
          <button class="action-btn confirm" @tap="saveAlias" :disabled="!isAliasValid">保存</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 我的排名信息
      myRanking: {
        id: 'current',
        aliasName: '创新科技',
        realName: '我的企业', // 真实名称，不显示
        rank: 5,
        change: 2, // 较上月变化
        usage: '156.8',
        areaEfficiency: '8.2',
        area: '180', // 办公面积
        floor: '12F', // 楼层
        industry: '科技', // 行业
        vsBuildingAvg: -12.5, // 与楼宇平均对比
        areaVsAvg: 5.2, // 单位面积能耗对比
        savingPotential: '28.5',
        costSaving: '22.8'
      },
      
      // 排名维度
      activeDimension: 'total',
      dimensions: [
        { label: '总能耗', value: 'total', icon: '⚡' },
        { label: '单位能耗', value: 'efficiency', icon: '📊' },
        { label: '同楼层', value: 'floor', icon: '🏢' },
        { label: '同行业', value: 'industry', icon: '👥' }
      ],
      
      // 楼层筛选
      selectedFloor: 0,
      floorOptions: [
        { label: '全部楼层', value: 'all' },
        { label: '12F', value: '12' },
        { label: '11F', value: '11' },
        { label: '10F', value: '10' },
        { label: '9F', value: '9' },
        { label: '8F', value: '8' }
      ],
      
      // 各维度排名数据
      totalRanking: [],
      efficiencyRanking: [],
      floorRanking: [],
      industryRanking: [],
      
      // 楼宇平均数据
      buildingAverage: '178.6',
      buildingAreaAverage: '7.8',
      
      // 节能建议
      energySuggestions: [
        {
          icon: '🌙',
          title: '优化空调使用',
          description: '下班后关闭空调，合理设置温度',
          saving: '12.5'
        },
        {
          icon: '💡',
          title: '照明系统优化',
          description: '更换为LED灯具，利用自然光',
          saving: '8.3'
        },
        {
          icon: '🔌',
          title: '设备待机管理',
          description: '设置智能插座，减少待机能耗',
          saving: '5.2'
        }
      ],
      
      // 绿色楼宇贡献数据
      totalBuildingSaving: '1,568',
      carbonReduction: '1,231',
      equivalentTrees: '68',
      energySavingProgress: 75,
      currentMonthSaving: '156',
      monthlyTarget: '208',
      ecoLevel: '黄金',
      ecoLevelValue: 3,
      energySavingRank: 3,
      totalPersonalSaving: '2,845',
      
      // 环保等级配置
      ecoLevels: [
        { name: '青铜', value: 1 },
        { name: '白银', value: 2 },
        { name: '黄金', value: 3 },
        { name: '铂金', value: 4 }
      ],
      
      // 别名设置
      showAliasModal: false,
      newAliasName: '',
      exampleAliases: ['创新先锋', '科技之星', '节能典范', '绿色企业', '智慧办公'],
      
      // 显示分享提示
      showSharePrompt: true,

      // 挑战榜相关数据
      showChallengeDetail: false,
      showRules: false,
      currentChallenge: {
        progress: 65,
        days: 5
      },
      standbyChallenge: {
        days: 3
      },
      challengeRanking: [
        { id: 1, name: '绿色先锋', challengeCount: 3, points: 280, isCurrent: false },
        { id: 2, name: '节能达人', challengeCount: 3, points: 250, isCurrent: false },
        { id: 3, name: '环保之星', challengeCount: 2, points: 220, isCurrent: false },
        { id: 'current', name: '创新科技', challengeCount: 2, points: 180, isCurrent: true },
        { id: 5, name: '智慧办公', challengeCount: 2, points: 150, isCurrent: false }
      ],
      availableChallenges: [
        {
          id: 1,
          icon: '📉',
          title: '月度节能10%',
          description: '本月用电量比上月减少10%',
          reward: '完成可获得50积分'
        },
        {
          id: 2,
          icon: '🔌',
          title: '周末零待机',
          description: '周末完全关闭非必要设备',
          reward: '完成可获得30积分'
        },
        {
          id: 3,
          icon: '💡',
          title: '照明优化周',
          description: '连续7天充分利用自然光',
          reward: '完成可获得40积分'
        }
      ]
    }
  },
  
  computed: {
    // 当前显示的排名列表
    currentRankingList() {
      switch (this.activeDimension) {
        case 'total': return this.totalRanking;
        case 'efficiency': return this.efficiencyRanking;
        case 'floor': return this.floorRanking;
        case 'industry': return this.industryRanking;
        default: return this.totalRanking;
      }
    },
    
    // 别名验证
    isAliasValid() {
      return this.newAliasName.length >= 2 && this.newAliasName.length <= 10;
    }
  },
  
  methods: {
    // 切换排名维度
    switchDimension(dimension) {
      this.activeDimension = dimension;
    },
    
    // 楼层选择变化
    onFloorChange(e) {
      this.selectedFloor = e.detail.value;
      this.refreshRankingData();
    },
    
    // 获取楼层标签
    getFloorLabel(index) {
      return this.floorOptions[index]?.label || '全部楼层';
    },
    
    // 获取维度标题
    getDimensionTitle(dimension) {
      const dim = this.dimensions.find(d => d.value === dimension);
      return dim ? dim.label : '总能耗排名';
    },
    
    // 获取排名样式类
    getRankClass(rank) {
      if (rank <= 3) return 'rank-top';
      if (rank <= 10) return 'rank-good';
      return 'rank-normal';
    },
    
    // 获取排名描述
    getRankDescription(rank) {
      if (rank <= 3) return '能效领先';
      if (rank <= 10) return '能效优秀';
      if (rank <= 20) return '能效良好';
      return '有待提升';
    },
    
    // 获取变化样式类
    getChangeClass(change) {
      if (change > 0) return 'change-up';
      if (change < 0) return 'change-down';
      return 'change-same';
    },
    
    // 获取企业描述
    getCompanyDescription(item) {
      if (item.id === 'current') return `${item.floor} · ${item.area}m²`;
      if (this.activeDimension === 'floor') return `${item.floor} · ${item.area}m²`;
      if (this.activeDimension === 'industry') return item.industry || '同行业';
      return `${item.floor} · ${item.area}m²`;
    },
    
    // 获取标杆状态样式
    getBenchmarkStatus(value) {
      if (value < 0) return 'status-good';
      if (value < 5) return 'status-normal';
      return 'status-poor';
    },
    
    // 获取标杆状态文本
    getBenchmarkText(value) {
      if (value < 0) return '优于平均';
      if (value < 5) return '接近平均';
      return '低于平均';
    },
    
    // 计算条形图宽度
    getBarWidth(value, compareValue) {
      const max = Math.max(parseFloat(value), parseFloat(compareValue));
      return (parseFloat(value) / max) * 100;
    },
    
    // 获取差距样式类
    getGapClass(gap) {
      if (gap <= 0) return 'gap-good';
      if (gap <= 5) return 'gap-normal';
      return 'gap-poor';
    },
    
    // 获取环保等级样式类
    getEcoLevelClass(level) {
      const levelMap = {
        '青铜': 'level-bronze',
        '白银': 'level-silver', 
        '黄金': 'level-gold',
        '铂金': 'level-platinum'
      };
      return levelMap[level] || 'level-bronze';
    },
    
    // 刷新排名数据
    refreshRanking() {
      uni.showLoading({
        title: '刷新中...'
      });
      
      // 模拟API调用
      setTimeout(() => {
        this.refreshRankingData();
        uni.hideLoading();
        uni.showToast({
          title: '排名已更新',
          icon: 'success'
        });
      }, 1500);
    },
    
    // 刷新排名数据
    refreshRankingData() {
      // 模拟生成排名数据
      this.generateRankingData();
    },
    
    // 生成模拟排名数据（使用别名）
    generateRankingData() {
      // 总能耗排名数据
      this.totalRanking = [
        { id: '1', aliasName: '智慧办公', realName: 'A公司', usage: '128.5', areaEfficiency: '6.8', area: '185', floor: '11F', industry: '科技' },
        { id: '2', aliasName: '绿色先锋', realName: 'B公司', usage: '132.7', areaEfficiency: '7.1', area: '175', floor: '10F', industry: '咨询' },
        { id: '3', aliasName: '创新中心', realName: 'C公司', usage: '135.2', areaEfficiency: '7.3', area: '172', floor: '12F', industry: '设计' },
        { id: '4', aliasName: '科技之星', realName: 'D公司', usage: '142.6', areaEfficiency: '7.6', area: '178', floor: '9F', industry: '科技' },
        { id: 'current', aliasName: this.myRanking.aliasName, realName: '我的企业', usage: '156.8', areaEfficiency: '8.2', area: '180', floor: '12F', industry: '科技' },
        { id: '6', aliasName: '数字空间', realName: 'F公司', usage: '158.3', areaEfficiency: '8.3', area: '175', floor: '11F', industry: 'IT' },
        { id: '7', aliasName: '创意工场', realName: 'G公司', usage: '162.4', areaEfficiency: '8.5', area: '178', floor: '10F', industry: '设计' },
        { id: '8', aliasName: '高效办公', realName: 'H公司', usage: '168.9', areaEfficiency: '8.8', area: '182', floor: '8F', industry: '金融' },
        { id: '9', aliasName: '智能空间', realName: 'I公司', usage: '172.1', areaEfficiency: '9.0', area: '175', floor: '12F', industry: '科技' },
        { id: '10', aliasName: '节能典范', realName: 'J公司', usage: '178.6', areaEfficiency: '9.3', area: '178', floor: '9F', industry: '服务' }
      ];
      
      // 其他维度的排名数据类似生成
      this.efficiencyRanking = [...this.totalRanking];
      this.floorRanking = [...this.totalRanking];
      this.industryRanking = [...this.totalRanking];
    },
    
    // 显示信息
    showInfo() {
      uni.showModal({
        title: '排名说明',
        content: '能耗排名基于企业月度用电量数据，使用别名显示以保护隐私。数据每24小时更新一次。排名仅供参考，鼓励节能行为。',
        showCancel: false,
        confirmText: '知道了'
      });
    },
    
    // 查看建议详情
    viewSuggestionDetail(suggestion) {
      uni.showModal({
        title: suggestion.title,
        content: suggestion.description + `\n\n预计每月可节约用电 ${suggestion.saving} kWh`,
        confirmText: '立即优化',
        cancelText: '稍后再说',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '已加入优化计划',
              icon: 'success'
            });
          }
        }
      });
    },
    
    // 分享排名
    shareRanking() {
      uni.showActionSheet({
        itemList: ['分享到微信', '分享到朋友圈', '生成分享图'],
        success: (res) => {
          const methods = ['微信', '朋友圈', '图片'];
          uni.showToast({
            title: `已分享到${methods[res.tapIndex]}`,
            icon: 'success'
          });
          this.dismissShare();
        }
      });
    },
    
    // 关闭分享提示
    dismissShare() {
      this.showSharePrompt = false;
    },
    
    // 编辑别名
    editAlias() {
      uni.navigateTo({
        url: '/pages/profile/company-info'
      });
    },
    
    // 关闭别名弹窗
    closeAliasModal() {
      this.showAliasModal = false;
    },
    
    // 加载企业信息
    loadCompanyInfo() {
      const companyInfo = uni.getStorageSync('companyInfo');
      if (companyInfo) {
        // 更新我的排名信息
        this.myRanking = {
          ...this.myRanking,
          aliasName: companyInfo.aliasName || this.myRanking.aliasName,
          area: companyInfo.area || this.myRanking.area,
          floor: companyInfo.floor || this.myRanking.floor,
          industry: companyInfo.industry || this.myRanking.industry
        };
        
        // 重新生成排名数据以更新显示
        this.generateRankingData();
      }
    },
    
    // 保存别名
    saveAlias() {
      if (!this.isAliasValid) {
        uni.showToast({
          title: '请输入2-10个字符的名称',
          icon: 'none'
        });
        return;
      }
      
      // 模拟保存到服务器
      uni.showLoading({
        title: '保存中...'
      });
      
      setTimeout(() => {
        this.myRanking.aliasName = this.newAliasName;
        this.generateRankingData(); // 重新生成排名数据以更新显示
        
        // 保存到本地存储
        uni.setStorageSync('userAlias', this.newAliasName);
        
        uni.hideLoading();
        this.closeAliasModal();
        
        uni.showToast({
          title: '名称设置成功',
          icon: 'success'
        });
      }, 1000);
    },

    // 挑战榜相关方法
    // 切换挑战榜详情显示
    toggleChallengeDetail() {
      this.showChallengeDetail = !this.showChallengeDetail;
    },
    
    // 切换规则显示
    toggleRules() {
      this.showRules = !this.showRules;
    },
    
    // 参与挑战
    joinChallenge(challenge) {
      uni.showModal({
        title: `参与${challenge.title}`,
        content: challenge.description,
        confirmText: '确认参与',
        cancelText: '再想想',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '挑战参与成功！',
              icon: 'success'
            });
            // 这里可以添加实际参与挑战的逻辑
          }
        }
      });
    }
  },
  
  onLoad() {
    // 页面加载时生成排名数据
    this.generateRankingData();
    
    // 从本地存储加载用户别名
    const savedAlias = uni.getStorageSync('userAlias');
    if (savedAlias) {
      this.myRanking.aliasName = savedAlias;
    }
    
    // 加载企业信息
    this.loadCompanyInfo();
  },
  
  onShow() {
    // 页面显示时重新加载企业信息，确保从企业信息页面返回时能更新数据
    this.loadCompanyInfo();
  },
  
  onPullDownRefresh() {
    // 下拉刷新
    this.refreshRanking();
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 1500);
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: linear-gradient(135deg, #f0f7ff 0%, #e6f7ff 100%);
}

.status-bar {
  height: var(--status-bar-height);
  background: transparent;
}

.page-content {
  flex: 1;
  padding: 30rpx 30rpx 140rpx;
}

/* 头部样式 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 40rpx;
  padding: 0 10rpx;
}

.header-main {
  flex: 1;
}

.title {
  display: block;
  font-size: 48rpx;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 12rpx;
  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.subtitle {
  display: block;
  font-size: 28rpx;
  color: #666;
}

.header-actions {
  display: flex;
  gap: 20rpx;
}

.action-item {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.action-icon {
  font-size: 36rpx;
}

/* 挑战榜横幅样式 */
.challenge-banner {
  background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%);
  border-radius: 20rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 8rpx 32rpx rgba(255, 165, 0, 0.3);
  overflow: hidden;
  transition: all 0.3s ease;
}

.challenge-banner:active {
  transform: translateY(-2rpx);
  box-shadow: 0 12rpx 40rpx rgba(255, 165, 0, 0.4);
}

.banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  position: relative;
}

.banner-main {
  display: flex;
  align-items: center;
  flex: 1;
}

.banner-icon {
  font-size: 60rpx;
  margin-right: 24rpx;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10rpx); }
}

.banner-text {
  flex: 1;
}

.banner-title {
  display: block;
  font-size: 32rpx;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8rpx;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

.banner-desc {
  display: block;
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.9);
}

.banner-badge {
  background: #ff4757;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  margin-left: 20rpx;
}

.badge-text {
  font-size: 20rpx;
  color: white;
  font-weight: 600;
}

.banner-arrow {
  margin-left: 20rpx;
  transition: transform 0.3s ease;
}

.banner-arrow.arrow-up {
  transform: rotate(180deg);
}

.banner-arrow text {
  font-size: 24rpx;
  color: white;
}

/* 挑战详情样式 */
.challenge-detail {
  background: rgba(255, 255, 255, 0.95);
  border-top: 1rpx solid rgba(255, 255, 255, 0.3);
  padding: 30rpx;
}

.challenge-section {
  margin-bottom: 40rpx;
}

.challenge-section:last-child {
  margin-bottom: 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}

.section-subtitle {
  font-size: 22rpx;
  color: #666;
}

/* 挑战进度样式 */
.challenge-progress {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.progress-item {
  display: flex;
  align-items: center;
  padding: 24rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  border-left: 4rpx solid #ffa500;
}

.progress-info {
  flex: 1;
}

.challenge-name {
  display: block;
  font-size: 26rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 8rpx;
}

.progress-text {
  display: block;
  font-size: 22rpx;
  color: #666;
}

.progress-bar {
  width: 120rpx;
  height: 12rpx;
  background: #e8e8e8;
  border-radius: 6rpx;
  margin: 0 20rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #52c41a, #73d13d);
  border-radius: 6rpx;
  transition: width 0.5s ease;
}

.reward-badge {
  background: #1890ff;
  padding: 8rpx 16rpx;
  border-radius: 16rpx;
}

.reward-text {
  font-size: 20rpx;
  color: white;
  font-weight: 500;
}

/* 挑战排行榜样式 */
.challenge-ranking {
  max-height: 400rpx;
  overflow-y: auto;
}

.challenge-ranking .ranking-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.challenge-ranking .ranking-item:last-child {
  border-bottom: none;
}

.challenge-ranking .ranking-top-1,
.challenge-ranking .ranking-top-2,
.challenge-ranking .ranking-top-3 {
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.05) 0%, transparent 100%);
  border-radius: 12rpx;
  margin: 0 -10rpx;
  padding: 20rpx 10rpx;
}

.challenge-ranking .current-user {
  background: linear-gradient(90deg, rgba(24, 144, 255, 0.1) 0%, transparent 100%);
  border-left: 4rpx solid #1890ff;
}

.rank-number {
  width: 60rpx;
  text-align: center;
  font-size: 26rpx;
  font-weight: 600;
  color: #666;
}

.medal-icon {
  font-size: 32rpx;
}

.user-info {
  flex: 1;
  padding: 0 20rpx;
}

.user-name {
  display: block;
  font-size: 26rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 4rpx;
}

.user-challenge {
  display: block;
  font-size: 22rpx;
  color: #999;
}

.score-info {
  text-align: right;
  min-width: 80rpx;
}

.score-value {
  display: block;
  font-size: 26rpx;
  font-weight: 600;
  color: #ffa500;
  margin-bottom: 2rpx;
}

.score-label {
  display: block;
  font-size: 20rpx;
  color: #999;
}

/* 可参与挑战样式 */
.available-challenges {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.challenge-card {
  display: flex;
  align-items: center;
  padding: 24rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  border: 2rpx solid transparent;
  transition: all 0.3s ease;
}

.challenge-card:active {
  background: #f0f7ff;
  border-color: #1890ff;
  transform: translateY(-2rpx);
}

.challenge-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff7e6;
  color: #ffa500;
  font-size: 36rpx;
  margin-right: 20rpx;
}

.challenge-content {
  flex: 1;
}

.challenge-title {
  display: block;
  font-size: 26rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 8rpx;
}

.challenge-desc {
  display: block;
  font-size: 22rpx;
  color: #666;
  margin-bottom: 12rpx;
  line-height: 1.4;
}

.challenge-reward {
  display: flex;
  align-items: center;
}

.reward-icon {
  font-size: 20rpx;
  margin-right: 8rpx;
}

.reward-desc {
  font-size: 20rpx;
  color: #52c41a;
  font-weight: 500;
}

.challenge-action {
  margin-left: 20rpx;
}

.join-btn {
  background: #52c41a;
  color: white;
  padding: 12rpx 24rpx;
  border-radius: 16rpx;
  font-size: 24rpx;
  font-weight: 500;
  border: none;
}

.join-btn:active {
  background: #389e0d;
}

/* 规则说明样式 */
.rules-section {
  background: #f8f9fa;
  border-radius: 16rpx;
  overflow: hidden;
}

.rules-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx;
  background: #e6f7ff;
}

.rules-title {
  font-size: 26rpx;
  font-weight: 600;
  color: #1890ff;
}

.rules-arrow {
  font-size: 24rpx;
  color: #1890ff;
}

.rules-content {
  padding: 24rpx;
  background: white;
}

.rule-item {
  display: block;
  font-size: 24rpx;
  color: #666;
  margin-bottom: 16rpx;
  line-height: 1.5;
}

.rule-item:last-child {
  margin-bottom: 0;
}

/* 卡片通用样式 */
.card {
  background: white;
  border-radius: 24rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
  padding: 32rpx;
  margin-bottom: 30rpx;
  border: 1rpx solid rgba(0, 0, 0, 0.03);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.card-title {
  font-size: 34rpx;
  color: #1a1a1a;
  font-weight: 600;
}

.card-subtitle {
  font-size: 24rpx;
  color: #999;
  margin-left: 5px;
}

.card-title-section {
  flex: 1;
}

.card-icon {
  width: 70rpx;
  height: 70rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
  color: #1890ff;
  font-size: 36rpx;
}

/* 我的排名卡片 */
.my-ranking-card {
  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
  color: white;
  position: relative;
}

.ranking-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.rank-badge {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 3rpx solid rgba(255, 255, 255, 0.3);
}

.rank-top {
  background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%);
}

.rank-good {
  background: linear-gradient(135deg, #c0c0c0 0%, #a9a9a9 100%);
}

.rank-normal {
  background: linear-gradient(135deg, #cd7f32 0%, #a67c52 100%);
}

.rank-number {
  font-size: 48rpx;
  font-weight: 700;
  line-height: 1;
}

.rank-label {
  font-size: 24rpx;
  opacity: 0.9;
}

.ranking-info {
  flex: 1;
  padding: 0 40rpx;
}

.company-name {
  display: block;
  font-size: 36rpx;
  font-weight: 600;
  margin-bottom: 8rpx;
}

.ranking-desc {
  display: block;
  font-size: 26rpx;
  opacity: 0.9;
  margin-bottom: 12rpx;
}

.ranking-change {
  display: flex;
  align-items: center;
  font-size: 24rpx;
}

.change-up {
  color: #a0e75a;
}

.change-down {
  color: #ff6b6b;
}

.change-same {
  color: #cccccc;
}

.change-icon {
  margin-right: 8rpx;
}

.ranking-stats {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.stat-item {
  text-align: center;
}

.stat-value {
  display: block;
  font-size: 28rpx;
  font-weight: 600;
  margin-bottom: 4rpx;
}

.stat-unit {
  display: block;
  font-size: 20rpx;
  opacity: 0.8;
  margin-bottom: 4rpx;
}

.stat-label {
  display: block;
  font-size: 22rpx;
  opacity: 0.7;
}

/* 企业基本信息样式 */
.company-basic-info {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  backdrop-filter: blur(10px);
}

.info-row {
  display: flex;
  justify-content: space-between;
}

.info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.info-icon {
  font-size: 32rpx;
  margin-bottom: 8rpx;
  opacity: 0.9;
}

.info-label {
  font-size: 22rpx;
  opacity: 0.8;
  margin-bottom: 6rpx;
}

.info-value {
  font-size: 26rpx;
  font-weight: 600;
}

.alias-setting {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16rpx;
  backdrop-filter: blur(10px);
}

.alias-icon {
  font-size: 24rpx;
  margin-right: 8rpx;
}

.alias-text {
  font-size: 24rpx;
  opacity: 0.9;
}

/* 维度选择卡片 */
.dimension-tabs {
  display: flex;
  gap: 20rpx;
}

.dimension-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24rpx 16rpx;
  border-radius: 16rpx;
  background: #f8f9fa;
  transition: all 0.3s ease;
}

.dimension-active {
  background: #1890ff;
  color: white;
  transform: translateY(-4rpx);
  box-shadow: 0 6rpx 20rpx rgba(24, 144, 255, 0.3);
}

.dimension-icon {
  font-size: 48rpx;
  margin-bottom: 12rpx;
}

.dimension-text {
  font-size: 24rpx;
  font-weight: 500;
}

/* 排名列表卡片 */
.ranking-filter {
  display: flex;
}

.floor-picker {
  background: #f8f9fa;
  border-radius: 16rpx;
  padding: 12rpx 20rpx;
}

.picker-trigger {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.picker-text {
  font-size: 24rpx;
  color: #666;
}

.picker-arrow {
  font-size: 20rpx;
  color: #999;
}

.ranking-list {
  max-height: 800rpx;
  overflow-y: auto;
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  transition: all 0.3s ease;
  position: relative;
}

.ranking-item:last-child {
  border-bottom: none;
}

.ranking-even {
  background-color: #fafafa;
}

.ranking-current {
  background: linear-gradient(90deg, rgba(24, 144, 255, 0.05) 0%, rgba(24, 144, 255, 0.02) 100%);
  border-left: 4rpx solid #1890ff;
  border-radius: 0 12rpx 12rpx 0;
}

.ranking-top-1,
.ranking-top-2,
.ranking-top-3 {
  padding: 30rpx 0;
  border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
}

.ranking-top-1 {
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.05) 0%, rgba(255, 215, 0, 0.02) 100%);
}

.ranking-top-2 {
  background: linear-gradient(90deg, rgba(192, 192, 192, 0.05) 0%, rgba(192, 192, 192, 0.02) 100%);
}

.ranking-top-3 {
  background: linear-gradient(90deg, rgba(205, 127, 50, 0.05) 0%, rgba(205, 127, 50, 0.02) 100%);
}

.rank-number-section {
  width: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.rank-medal {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.medal-1 {
  background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%);
  box-shadow: 0 4rpx 12rpx rgba(255, 165, 0, 0.3);
}

.medal-2 {
  background: linear-gradient(135deg, #c0c0c0 0%, #a9a9a9 100%);
  box-shadow: 0 4rpx 12rpx rgba(169, 169, 169, 0.3);
}

.medal-3 {
  background: linear-gradient(135deg, #cd7f32 0%, #a67c52 100%);
  box-shadow: 0 4rpx 12rpx rgba(205, 127, 50, 0.3);
}

.medal-icon {
  font-size: 28rpx;
}

.rank-number {
  font-size: 32rpx;
  font-weight: 600;
  color: #666;
}

.company-info {
  flex: 1;
  padding: 0 20rpx;
}

.company-name {
  display: block;
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 6rpx;
}

.current-company {
  color: #1890ff;
  font-weight: 600;
}

.current-tag {
  font-size: 20rpx;
  color: #1890ff;
  margin-left: 8rpx;
}

.company-desc {
  display: block;
  font-size: 22rpx;
  color: #999;
}

.energy-data {
  text-align: right;
  min-width: 120rpx;
}

.energy-value {
  display: block;
  font-size: 26rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 2rpx;
}

.energy-unit {
  display: block;
  font-size: 20rpx;
  color: #999;
  margin-bottom: 4rpx;
}

.energy-efficiency {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.efficiency-value {
  font-size: 20rpx;
  color: #666;
  margin-right: 4rpx;
}

.efficiency-unit {
  font-size: 18rpx;
  color: #999;
}

.comparison-indicator {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background: #1890ff;
  margin-left: 20rpx;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0.6; transform: scale(1); }
}

/* 对标分析卡片 */
.benchmark-content {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.benchmark-item {
  padding: 24rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
}

.benchmark-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.benchmark-label {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
}

.benchmark-status {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  font-weight: 500;
}

.status-good {
  background: #f6ffed;
  color: #52c41a;
}

.status-normal {
  background: #fffbe6;
  color: #faad14;
}

.status-poor {
  background: #fff2f0;
  color: #ff4d4f;
}

.benchmark-bar {
  margin-top: 16rpx;
}

.bar-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12rpx;
}

.bar-label {
  font-size: 22rpx;
  color: #666;
}

.bar-value {
  font-size: 22rpx;
  color: #333;
  font-weight: 500;
}

.bar-container {
  height: 20rpx;
  background: #e8e8e8;
  border-radius: 10rpx;
  position: relative;
  display: flex;
}

.bar-fill {
  height: 100%;
  border-radius: 10rpx;
  transition: width 0.5s ease;
}

.my-bar {
  background: linear-gradient(90deg, #1890ff, #40a9ff);
  margin-right: 2rpx;
}

.avg-bar {
  background: linear-gradient(90deg, #52c41a, #73d13d);
}

.gap-analysis {
  display: flex;
  justify-content: space-between;
}

.gap-item {
  text-align: center;
  flex: 1;
}

.gap-label {
  display: block;
  font-size: 22rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.gap-value {
  display: block;
  font-size: 26rpx;
  font-weight: 600;
}

.gap-good {
  color: #52c41a;
}

.gap-normal {
  color: #faad14;
}

.gap-poor {
  color: #ff4d4f;
}

.potential {
  color: #1890ff;
}

.saving {
  color: #52c41a;
}

/* 绿色楼宇贡献卡片样式 */
.contribution-card {
  background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
  color: white;
  position: relative;
  overflow: hidden;
}

.contribution-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
  border-radius: 50%;
}

.contribution-content {
  position: relative;
  z-index: 2;
}

/* 统计数据样式 */
.contribution-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40rpx;
  padding-bottom: 30rpx;
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);
}

.contribution-stats .stat-item {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contribution-stats .stat-icon {
  font-size: 48rpx;
  margin-bottom: 16rpx;
  opacity: 0.9;
}

.contribution-stats .stat-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contribution-stats .stat-value {
  font-size: 32rpx;
  font-weight: 700;
  margin-bottom: 4rpx;
}

.contribution-stats .stat-unit {
  font-size: 22rpx;
  opacity: 0.9;
  margin-bottom: 8rpx;
}

.contribution-stats .stat-label {
  font-size: 24rpx;
  opacity: 0.8;
}

/* 进度条样式 */
.progress-section {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  backdrop-filter: blur(10px);
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.progress-title {
  font-size: 28rpx;
  font-weight: 600;
}

.progress-percent {
  font-size: 32rpx;
  font-weight: 700;
  color: #fffacd;
}

.progress-bar {
  height: 16rpx;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 8rpx;
  overflow: hidden;
  margin-bottom: 16rpx;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #fffacd, #ffeb3b);
  border-radius: 8rpx;
  transition: width 0.8s ease;
  box-shadow: 0 0 10rpx rgba(255, 250, 205, 0.5);
}

.progress-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.progress-label {
  font-size: 24rpx;
  opacity: 0.9;
}

.progress-target {
  font-size: 22rpx;
  opacity: 0.7;
}

/* 环保等级样式 */
.eco-level {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  backdrop-filter: blur(10px);
}

.level-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.level-title {
  font-size: 28rpx;
  font-weight: 600;
}

.level-badge {
  padding: 12rpx 24rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: 600;
}

.level-bronze {
  background: linear-gradient(135deg, #cd7f32, #a67c52);
  box-shadow: 0 4rpx 12rpx rgba(205, 127, 50, 0.4);
}

.level-silver {
  background: linear-gradient(135deg, #c0c0c0, #a9a9a9);
  box-shadow: 0 4rpx 12rpx rgba(192, 192, 192, 0.4);
}

.level-gold {
  background: linear-gradient(135deg, #ffd700, #ffa500);
  box-shadow: 0 4rpx 12rpx rgba(255, 215, 0, 0.4);
}

.level-platinum {
  background: linear-gradient(135deg, #e5e4e2, #d3d3d3);
  box-shadow: 0 4rpx 12rpx rgba(229, 228, 226, 0.4);
}

.level-text {
  color: white;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.level-progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.level-progress::before {
  content: '';
  position: absolute;
  top: 20rpx;
  left: 0;
  right: 0;
  height: 4rpx;
  background: rgba(255, 255, 255, 0.3);
  z-index: 1;
}

.level-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  flex: 1;
}

.step-dot {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  margin-bottom: 12rpx;
  border: 4rpx solid rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

.level-active .step-dot {
  background: white;
  box-shadow: 0 0 20rpx rgba(255, 255, 255, 0.8);
}

.level-current .step-dot {
  background: #fffacd;
  border-color: #ffeb3b;
  box-shadow: 0 0 25rpx rgba(255, 235, 59, 0.8);
  animation: pulse 2s infinite;
}

.step-label {
  font-size: 22rpx;
  opacity: 0.8;
  text-align: center;
}

.level-active .step-label {
  opacity: 1;
  font-weight: 500;
}

/* 贡献详情样式 */
.contribution-details {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.detail-item {
  display: flex;
  align-items: center;
  padding: 24rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16rpx;
  backdrop-filter: blur(10px);
}

.detail-icon {
  font-size: 40rpx;
  margin-right: 20rpx;
  opacity: 0.9;
}

.detail-content {
  flex: 1;
}

.detail-title {
  display: block;
  font-size: 24rpx;
  opacity: 0.8;
  margin-bottom: 8rpx;
}

.detail-value {
  display: block;
  font-size: 28rpx;
  font-weight: 600;
}

/* 环保提示样式 */
.eco-tips {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16rpx;
  padding: 30rpx;
  backdrop-filter: blur(10px);
}

.tip-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.tip-icon {
  font-size: 32rpx;
  margin-right: 12rpx;
}

.tip-title {
  font-size: 26rpx;
  font-weight: 600;
}

.tip-content {
  padding-left: 44rpx;
}

.tip-text {
  font-size: 24rpx;
  line-height: 1.5;
  opacity: 0.9;
}

/* 节能建议卡片样式 */
.suggestion-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.suggestion-item {
  display: flex;
  align-items: center;
  padding: 24rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  transition: all 0.3s ease;
}

.suggestion-item:active {
  background: #f0f7ff;
  transform: translateY(-2rpx);
}

.suggestion-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e6f7ff;
  color: #1890ff;
  font-size: 36rpx;
  margin-right: 20rpx;
}

.suggestion-content {
  flex: 1;
}

.suggestion-title {
  display: block;
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 8rpx;
}

.suggestion-desc {
  display: block;
  font-size: 24rpx;
  color: #666;
  margin-bottom: 12rpx;
  line-height: 1.4;
}

.suggestion-impact {
  display: flex;
  align-items: center;
}

.impact-text {
  font-size: 22rpx;
  color: #52c41a;
  font-weight: 500;
}

.suggestion-action {
  margin-left: 20rpx;
}

.action-btn {
  background: #1890ff;
  color: white;
  padding: 12rpx 24rpx;
  border-radius: 16rpx;
  font-size: 24rpx;
  font-weight: 500;
  border: none;
}

/* 分享卡片 */
.share-card {
  background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%);
  color: white;
  text-align: center;
}

.share-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.share-icon {
  font-size: 80rpx;
  margin-bottom: 16rpx;
}

.share-title {
  font-size: 36rpx;
  font-weight: 700;
  margin-bottom: 12rpx;
}

.share-desc {
  font-size: 26rpx;
  opacity: 0.9;
  margin-bottom: 30rpx;
  line-height: 1.4;
}

.share-actions {
  display: flex;
  gap: 20rpx;
  width: 100%;
}

.share-btn {
  flex: 2;
  background: white;
  color: #ffa500;
  height: 80rpx;
  border-radius: 20rpx;
  font-size: 28rpx;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.dismiss-btn {
  flex: 1;
  padding: 20rpx 0;
  font-size: 26rpx;
  opacity: 0.8;
}

/* 别名设置弹窗样式 */
.alias-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.modal-content {
  position: relative;
  background: white;
  border-radius: 24rpx;
  width: 600rpx;
  max-width: 90vw;
  padding: 40rpx;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.2);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.modal-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.modal-close {
  font-size: 48rpx;
  color: #999;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-body {
  margin-bottom: 40rpx;
}

.modal-desc {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 30rpx;
}

.alias-input-group {
  position: relative;
  margin-bottom: 40rpx;
}

.alias-input {
  height: 100rpx;
  border: 2rpx solid #e8e8e8;
  border-radius: 16rpx;
  padding: 0 30rpx;
  font-size: 32rpx;
  color: #333;
  background: #f8f9fa;
}

.alias-input:focus {
  border-color: #1890ff;
}

.char-count {
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24rpx;
  color: #999;
}

.alias-examples {
  margin-top: 30rpx;
}

.examples-title {
  display: block;
  font-size: 26rpx;
  color: #666;
  margin-bottom: 20rpx;
}

.example-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.example-tag {
  padding: 12rpx 20rpx;
  background: #f0f7ff;
  border: 1rpx solid #1890ff;
  border-radius: 20rpx;
  font-size: 24rpx;
  color: #1890ff;
}

.modal-actions {
  display: flex;
  gap: 20rpx;
}

.modal-actions .action-btn {
  flex: 1;
  height: 88rpx;
  border-radius: 16rpx;
  font-size: 32rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.modal-actions .action-btn.cancel {
  background: #f5f5f5;
  color: #666;
  border: 1rpx solid #e8e8e8;
}

.modal-actions .action-btn.confirm {
  background: #1890ff;
  color: white;
}

.modal-actions .action-btn.confirm:disabled {
  background: #cccccc;
  color: #999;
}
</style>